$t: 0.9;
$f: "Microsoft YaHei", "微软雅黑", "Trebuchet MS", Arial, Verdana, Tahoma, sans-serif;
$tool-lv: rgba(57, 225, 49, $t);
$tool-lan: rgba(54, 201, 225, $t);
$tool-hei: rgba(1, 1, 1, $t);
$tool-hong: rgba(225, 20, 17, $t);
$tool-zi: rgba(158, 65, 255, $t);
$tool-huang: rgba(225, 176, 49, $t);
$tool-hui: rgba(129, 129, 129, $t);

$tool-nav-lv: rgb(73, 181, 61);
$tool-nav-lan: rgb(66, 181, 181);
$tool-nav-hei: rgb(1, 1, 1);
$tool-nav-hong: rgb(181, 69, 57);
$tool-nav-zi: rgb(171, 83, 181);
$tool-nav-huang: rgb(225, 181, 49);

*,.btn:not(:disabled):not(.disabled) {
  cursor: url(""), default;
}

a:hover, *[title],.btn:not(:disabled):not(.disabled){
  cursor: url(""), pointer;
}

@mixin tool-title($color:$tool-lv) {
  display: inline-block;
  line-height: 30px;
  color: white;
  background-color: $color;
  font: 12px $f;
  padding: 4px 8px;
  border-radius: 4px;
  position: absolute;
  height: auto;
  z-index: 9999;
  &::before {
    position: absolute;
    display: block;
    top: -10px;
    left: 14px;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent $color transparent;
    content: '';
  }
}

a {
  text-decoration: none;
}

/* tool-title*/
.tool-title-lv {
  @include tool-title($tool-lv);
}

.tool-title-lan {
  @include tool-title($tool-lan);
}

.tool-title-hei {
  @include tool-title($tool-hei);
}

.tool-title-hong {
  @include tool-title($tool-hong);
}

.tool-title-zi {
  @include tool-title($tool-zi);
}

.tool-title-huang {
  @include tool-title($tool-huang);
}

.tool-title-hui {
  @include tool-title($tool-hui);
}

/* panel */
@mixin panel($bj:$tool-lv,$c:rgba(74,74,74,$t),$b:#ffffff) {
  box-sizing: border-box;
  min-width: 240px;
  display: inline-block;
  background-color: $bj;
  border-radius: 4px;
  color: $c;
  border: 1px solid $b;
  & *, & {
    box-sizing: border-box;
    font-family: $f;
  }

  .title {
    line-height: 30px;
    padding: 0 8px;
    font-size: 14px;
    border-bottom: 1px dashed $b;
    font-weight: bold;
    a, a:hover {
      color: $c;
    }
    i {
      display: inline-block;
      padding: 0 8px 0 0;
      margin: 0 8px 0 0;
      border-right: 1px dashed $b;
    }
  }
  .content {
    font-size: 12px;
    padding: 8px;
  }
  /*附加属性*/
  &._bai, &._bai *, &._bai .title, &._bai .title a {
    color: #ffffff;
  }
  &._hei, &._hei *, &._hei .title, &._hei .title a {
    color: rgba(74, 74, 74, $t);
  }
  &._Solid .title {
    border-bottom: 1px solid $b;
    i {
      border-right: 1px solid $b;
    }
  }
}

.panel-lv {
  @include panel($tool-lv);
}

.panel-lan {
  @include panel($tool-lan);
}

.panel-hei {
  @include panel($tool-hei, #ffffff, #e2e2e2);
}

.panel-hong {
  @include panel($tool-hong);
}

.panel-zi {
  @include panel($tool-zi);
}

.panel-huang {
  @include panel($tool-huang);
}

.panel-hui {
  @include panel($tool-hui);
}

/* label */
@mixin label($bj:$tool-lv,$color:#ffffff) {
  background-color: $bj;
  font: 10px $f;
  color: $color;
  position: relative;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0 4px;
  &::before {
    position: absolute;
    top: 0;
    left: -20px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent $bj transparent transparent;
    content: "";
  }
  &::after {
    display: block;
    position: absolute;
    left: -4px;
    top: 8px;
    content: '';
    border-radius: 100%;
    background-color: white;
    height: 4px;
    width: 4px;
  }
}

.label-lv {
  @include label($tool-lv);
}

.label-lan {
  @include label($tool-lan);
}

.label-hei {
  @include label($tool-hei);
}

.label-hong {
  @include label($tool-hong);
}

.label-zi {
  @include label($tool-zi);
}

.label-huang {
  @include label($tool-huang);
}

.label-hui {
  @include label($tool-hui);
}

/* 导航 */
@mixin be() {
  display: inline-block;
  position: relative;
  height: 100%;
  transition: all .3s;
  top: -1px;
}

@mixin nav_1($bj:$tool-nav-lv) {
  $height: 48px;
  list-style-type: none;
  background-color: $bj;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  height: $height;
  padding: 0 30px;
  border-radius: 4px;
  & *, & {
    box-sizing: border-box;
    font: 16px $f;
    transition: all .5s;
  }
  a {
    display: inline-block;
  }
  .logo {
    flex-shrink: 0;
    max-height: $height;
    max-width: 120px;
    overflow: hidden;
    img {
      max-width: 120px;
    }
    * {
      font-size: 24px;
      font-weight: bold;
      color: rgb(247, 247, 249);
      font-family: 楷体;
    }
  }
  /*导航栏*/
  ul {
    & *, & {
      box-sizing: border-box;
      font: 15px $f;
      transition: all .5s;
    }
    margin: 0;
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    & > li {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      &::before {
        @include be();
        content: '[';
        left: -4px;
      }
      &::after {
        @include be();
        content: ']';
        right: -4px;
      }
      &, * {
        color: rgb(247, 247, 249);
      }
      & > a {
        display: inline-block;
      }
      &.this {
        & > a {
          font-weight: bold;
        }
      }
      &:hover, &.this {
        * {
          //color: $tool-lv;
        }
        &::before {
          left: -10px;
        }
        &::after {
          right: -10px;
        }
      }
      &:hover {
        & ol {
          display: block;
        }
      }
      width: 120px;
      text-align: center;
      display: inline-block;
      padding: 0 6px;
      position: relative;
    }
  }
}

.nav-t-lv {
  @include nav_1($tool-nav-lv);
}

.nav-t-lan {
  @include nav_1($tool-nav-lan);
}

.nav-t-hei {
  @include nav_1($tool-nav-hei);
}

.nav-t-hong {
  @include nav_1($tool-nav-hong);
}

.nav-t-zi {
  @include nav_1($tool-nav-zi);
}

.nav-t-huang {
  @include nav_1($tool-nav-huang);
}

/*--*/
.nav-t1-lv {
  @include nav_1($tool-lv);
}

.nav-t1-lan {
  @include nav_1($tool-lan);
}

.nav-t1-hei {
  @include nav_1($tool-hei);
}

.nav-t1-hong {
  @include nav_1($tool-hong);
}

.nav-t1-zi {
  @include nav_1($tool-zi);
}

.nav-t1-huang {
  @include nav_1($tool-huang);
}

.nav-t1-hui {
  @include nav_1($tool-hui);
}

/*水平线*/
@mixin hr($color:$tool-lv) {
  border: 0;
  height: 1px;
  background-color: $color;
  margin: 2px auto;
  //background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

@mixin hr_j($color:$tool-lv) {
  border: 0;
  height: 2px;
  margin: 2px auto;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), $color, rgba(0, 0, 0, 0));
}

.hr-lv {
  @include hr($tool-lv);
}

.hr-lan {
  @include hr($tool-lan);
}

.hr-hei {
  @include hr($tool-hei);
}

.hr-hong {
  @include hr($tool-hong);
}

.hr-zi {
  @include hr($tool-zi);
}

.hr-huang {
  @include hr($tool-huang);
}

.hr-hui {
  @include hr($tool-hui);
}
/* 表格 */
@mixin table_j($color:#8e8e8e){
  &,& tr{
    width: 100%;
  }
  &,& tr,& td{
    border: 1px solid $color;
    border-collapse: collapse;
  }
  td{
    padding: 4px;
    font-size: 14px;
    color: #4d4d4d;
  }
  thead tr{
    height: 40px;
    text-align: center;
    background:$color;
    td{
      font-size: 15px;
      color: #fff;
    }
  }
}
.table-default{
  @include table_j();
}
.table-lv{
  @include table_j($tool-nav-lv);
}
.table-lan{
  @include table_j($tool-nav-lan);
}
.table-hei{
  @include table_j($tool-nav-hei);
}
.table-hong{
  @include table_j($tool-nav-hong);
}
.table-zi{
  @include table_j($tool-nav-zi);
}
.table-huang{
  @include table_j($tool-nav-huang);
}
/* s */
.hr-j-lv {
  @include hr_j($tool-lv);
}

.hr-j-lan {
  @include hr_j($tool-lan);
}

.hr-j-hei {
  @include hr_j($tool-hei);
}

.hr-j-hong {
  @include hr_j($tool-hong);
}

.hr-j-zi {
  @include hr_j($tool-zi);
}

.hr-j-hui {
  @include hr_j($tool-hui);
}

/* transition */
@mixin tran($s:.5s) {
  transition: all $s;
}

.trn-01 {
  @include tran(.1s);
}

.trn-02 {
  @include tran(.2s);
}

.trn-03 {
  @include tran(.3s);
}

.trn-04 {
  @include tran(.4s);
}

.trn-05 {
  @include tran(.5s);
}

.trn-06 {
  @include tran(.6s);
}

.trn-07 {
  @include tran(.7s);
}

.trn-08 {
  @include tran(.8s);
}

.trn-1 {
  @include tran(1s);
}

.trn-2 {
  @include tran(2s);
}

.trn-3 {
  @include tran(3s);
}

.trn-4 {
  @include tran(4s);
}

.trn-5 {
  @include tran(5s);
}

.trn-6 {
  @include tran(6s);
}

.trn-7 {
  @include tran(7s);
}

.trn-8 {
  @include tran(8s);
}

/* transition-all */
@mixin tran($s:.5s) {
  &, & * {
    transition: all $s;
  }
}

.trn-01-all {
  @include tran(.1s);
}

.trn-02-all {
  @include tran(.2s);
}

.trn-03-all {
  @include tran(.3s);
}

.trn-04-all {
  @include tran(.4s);
}

.trn-05-all {
  @include tran(.5s);
}

.trn-06-all {
  @include tran(.6s);
}

.trn-07-all {
  @include tran(.7s);
}

.trn-08-all {
  @include tran(.8s);
}

.trn-1-all {
  @include tran(1s);
}

.trn-2-all {
  @include tran(2s);
}

.trn-3-all {
  @include tran(3s);
}

.trn-4-all {
  @include tran(4s);
}

.trn-5-all {
  @include tran(5s);
}

.trn-6-all {
  @include tran(6s);
}

.trn-7-all {
  @include tran(7s);
}

.trn-8-all {
  @include tran(8s);
}
/* container */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 760px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}





